<template>
  <div class="index">
    <!-- 全局音效 -->
    <audio src="" id="warnning"></audio>
    <div class="title" :class="{'title1':title1}">
      <div class="menu" style="background-color: rgba(233,243,252,0);padding-left:180px;padding-top: 2px;height: 36px;line-height: 36px;margin-top: -17px;">
        <!--        <el-menu :default-active="$route.name" class="el-menu-demo" style="height:36px;width: 460px;" mode="horizontal">-->
        <el-menu :default-active="$route.name" class="el-menu-demo" style="height:36px;width: 460px;" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/" style="width:65px;font-size:14px;" >
            <router-link to="/" style="text-decoration:none">
              地图监控
            </router-link>
          </el-menu-item>
          <el-menu-item index="SafeWarring" style="width:65px;font-size:14px;">
            <router-link to="/safeWarring" style="text-decoration:none">
              安全感知
            </router-link>
          </el-menu-item>
          <el-menu-item index="Fence" style="width:65px;font-size:14px;">
            <router-link to="/fence" style="text-decoration:none">
              电子围栏
            </router-link>
          </el-menu-item>
          <el-menu-item index="Device" style="width:65px;font-size:14px;">
            <router-link to="/device" style="text-decoration:none">
              设备管理
            </router-link>
          </el-menu-item>
          <el-menu-item index="UserInfo" style="width:65px;font-size:14px;" v-if="userActive">
            <router-link to="/userInfo" style="text-decoration:none">
              人员详情
            </router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="welcome">
      <div style="height: 36px;margin-top: 6px">
        <div style="width: 110px;height: 36px;display: inline;"><img src="/static/img/welcome.png" style="height: 16px;vertical-align:middle;padding-left: 8px"><span style="margin-left: 5px;">欢迎您，{{name}}</span></div>
      </div>
    </div>
    <div class="exit" @click="logout" style="cursor: pointer">
      <div style="height: 36px;margin-top: 6px">
        <div style="width: 90px;display: inline;float: right;" ><img src="/static/img/exit-icon.png" style="height: 16px;vertical-align:middle;margin-left: 10px"><span style="margin-left: 5px;">退出登录</span></div></div>
    </div>
    <div class="state-window" :style="$route.name=='/'?'display:block':'display:none'">
      <div style="font-size: 14px;color: #1C7CD5;padding-left: 3px;" > 到岗统计</div>
      <div style="font-size: 14px;padding-left: 3px;"> <span>在线：{{inline}}</span> <span style="padding-left: 18px;">总数：{{total}}</span></div>
      <table style="font-size: 14px;color:#495057;padding-top: 6px;">
        <tr>
          <td width="110px" style="height: 26px"><img src="~@/assets/img/pand.png" style="vertical-align:middle;width: 12px;height: 12px;"/> 安全围栏</td>
          <td width="20px" align="right">{{wwei}}</td>
        </tr>
        <tr style="height: 26px">
          <td><img src="~@/assets/img/sos.png" style="vertical-align:middle;width: 12px;height: 12px;"/> SOS/跌落</td>
          <td align="right">{{wsos}}</td>
        </tr>
        <tr style="height: 26px">
          <td><img src="~@/assets/img/temp.png" style="vertical-align:middle;width: 12px;height: 12px;"/> 体征异常</td>
          <td align="right">{{wtin}}</td>
        </tr>
        <tr style="height: 26px">
          <td><img src="~@/assets/img/tools.png" style="vertical-align:middle;width: 12px;height: 12px;"/> 工具异常</td>
          <td align="right">{{wgong}}</td>
        </tr>
      </table>
    </div>

    <div class="state-window-sub" :style="$route.name!='/'?'display:block':'display:none'">
      <div style="font-size: 12px;color: #1C7CD5;padding-left: 3px;"> 到岗统计</div>
      <div style="font-size: 12px;padding-left: 3px;"> <span>在线：{{inline}}</span> <span style="padding-left: 18px;">总数：{{total}}</span></div>
    </div>

    <div id="container" class="mymap" ref="mymap"/>

    <div class="input-card" style="width:7.3rem">
      <div class="input-item">
        <img src="~@/assets/ewdt1.png" style="cursor:pointer;" @click="loadErMap()">
        <img src="~@/assets/wxdt1.png" style="cursor:pointer;" @click="loadWeiMap()">
      </div>
    </div>
    <router-view v-if="isRouterAlive"></router-view>

    <div id="bdtts_div_id">
      <audio id="tts_autio_id" autoplay="autoplay">
        <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=" type="audio/mpeg">
        <embed id="tts_embed_id" height="0" width="0" src="">
      </audio>
    </div>

    <div v-if="emsg" class="el-message el-message--warning" style="z-index:2600;margin-top:100px;min-width: 180px;text-align:center;display: block;">
      <div v-html="msgcontent"></div><br>
      <div>
        <el-button size="mini" type="primary" @click="closeEmsg">确定</el-button>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import AMap from 'AMap'

  let marker = {}
  let placeSearch = {}
  let geocoder = {}
  let satelliteLayer = {}
  let markers=[]
  export default {
    provide(){
      return {
        reload: this.reload,
      }
    },
    data () {
      return {
        timer: '',
        activeIndex: 'Home',
        center: [121.448026, 31.267235],
        isRouterAlive :true,
        inline:0,
        total:0,
        wwei:0,
        wsos:0,
        wtin:0,
        wgong:0,
        cones:[],
        fence:[],
        polygons:[],
        ttText:'',
        userActive:false,
        title1:true,
        name:'用户',
        emsg: false,
        msgcontent: "",
      }
    },
    mounted () {
      let __this = this
      // 在main.js或需要使用的地方引入并建立连接

      __this.createSocket('ws://jj.how2go.cn:12233/ws')

      //console.log(__this.$store.getters.user.username)
      //console.log(localStorage.getItem('token').split("-")[0])
      if(localStorage.getItem('token').split("-")[0] == 'admin'){
        __this.userActive = true;
        __this.title1 = false;
        __this.name = '管理员'
      }
      // 接收消息
      const getsocketData = e => {  // 创建接收消息函数
        const data = e && e.detail.data
        console.log(data)
        // if(data!='ping')
        //   this.playAudio()
        if(data!=null){
          this.playAudio()
          __this.sleep(1400).then(()=>{
            __this.ttText = "您有一条新告警信息，请及时处理!"
            __this.doTTS()
          })
          //显示告警
          let dd = data.split(",")
          let d = dd[dd.length - 2]
          let msg = d.split(";")
          __this.msgcontent =
            "<strong>" + msg[2] + "</strong><br><p>" + msg[1] + ":" + msg[0] + "</p>"
          __this.emsg = true
        }
      }
      // 注册监听事件
      window.addEventListener('onmessageWS', getsocketData)
      __this.loadmap()   // 加载地图和相关组件
      this.axios.get("warning/mainInfo").then(function (response) {
        let result = response.data
        if(result.code=='200'){
          __this.inline = result.result.inline
          __this.total = result.result.total
          __this.wwei = result.result.wwei
          __this.wsos = result.result.wsos
          __this.wtin = result.result.wtin
          __this.wgong = result.result.wgong
        }
      }).catch(function (error) {
        console.log(error)
      })
      // __this.test()
      // console.log(localStorage.getItem("Ip"))
      this.timer = setInterval(this.getMainInfo, 30000)
    },

    methods:{
      closeEmsg() {
        this.emsg = false
      },
      logout(){
        let that = this
        that.$confirm("确定退出平台吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //跳转登录
          that.$store.dispatch('LogOut');
          that.closeSocket()
          that.$router.push({path: '/login'})
        })
      },
      sleep(time) {
        return new Promise(resolve => setTimeout(resolve, time))
      },
      doTTS() {
        let that = this
        let ttsDiv = document.getElementById('bdtts_div_id');
        let ttsAudio = document.getElementById('tts_autio_id');
        let ttsText = that.ttText;

        // 文字转语音
        ttsDiv.removeChild(ttsAudio);
        let au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
        let sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=3&spd=5&text=' + ttsText + '" type="audio/mpeg">';
        let eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
        let au2 = '</audio>';
        ttsDiv.innerHTML = au1 + sss + eee + au2;

        ttsAudio = document.getElementById('tts_autio_id');

        ttsAudio.play();
      },
      test(){
        let ip = localStorage.getItem("Ip")
        let url='https://restapi.amap.com/v3/ip?ip='+ip+'&output=JSON&key=40d1b26caf9247f831310af28f340725'
        this.axios.get(url).then(function (response) {
          console.log(response)
          if(response.status == 1){
            console.log(response.rectangle)
          }
        })
      },
      reload() {
        this.isRouterAlive = false
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      },
      handleSelect(key, keyPath){
        this.$router.push({
          path: key,
          params: {data: 'query' }
        })
      },
      loadmap () {
        global.map = new AMap.Map('container', {
          resizeEnable: true,
          center: this.center,
	        expandZoomRange:true,
	        zooms:[3,20],
          zoom: 15
        })
        let _this = this
        // 构造官方卫星、路网图层
        satelliteLayer = new AMap.TileLayer.Satellite();
        let roadNetLayer =  new AMap.TileLayer.RoadNet();

        // 输入提示
        let options = {
          'enableHighAccuracy': true, // 是否使用高精度定位，默认:true
          'timeout': 10000,           // 超过10秒后停止定位，默认：无穷大
          'maximumAge': 0,            // 定位结果缓存0毫秒，默认：0
          'showButton': true,//是否显示定位按钮
          //'buttonPosition': 'LB',//定位按钮的位置
          /* LT LB RT RB */
          'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
          'showMarker': true,//是否显示定位点
          'markerOptions':{//自定义定位点样式，同Marker的Options
            'offset': new AMap.Pixel(-18, -36),
            'icon':'/static/img/current1.png'
          },
          'showCircle': false,//是否显示定位精度圈
          'circleOptions': {//定位精度圈的样式
            'strokeColor': '#0093FF',
            'noSelect': true,
            'strokeOpacity': 0.5,
            'strokeWeight': 1,
            'fillColor': '#02B0FF',
            'fillOpacity': 0.25
          },
          'panToLocation': true,
        }
        //global.map.add([roadNetLayer]);
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geocoder', 'AMap.InfoWindow',"AMap.Geolocation"], () => {
          global.map.addControl(new AMap.Scale())
          var geolocation = new AMap.Geolocation(options);
          global.map.addControl(geolocation);
          geolocation.getCurrentPosition()
        })

      },
      loadErMap(){
        global.map.remove(satelliteLayer);
      },
      loadWeiMap(){
        global.map.add(satelliteLayer);
      },
      //获取人员设备状态列表
      getMainInfo(){
        let _this = this
        this.axios.get("warning/mainInfo ").then(function (response) {
          let result = response.data
          if(result.code=='200'){
            _this.inline = result.result.inline
            _this.total = result.result.total
            _this.wwei = result.result.wwei
            _this.wsos = result.result.wsos
            _this.wtin = result.result.wtin
            _this.wgong = result.result.wgong
          }
        })
      },

    }
  }
</script>

<style>
  html,body,.index {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #container {
    width: 100%;
    height: 100%;
  }
  .logo{
    width: 220px;
    height: 70px;
    line-height: 70px;
  }
  .title {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    width: 37rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 1rem;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
    z-index: 1999;
    background-image: url('~@/assets/logo.png');
    background-size: 26%;/*按比例缩放*/
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #fff;
    height: 30px;
  }

  .title1{
    width: 33rem;
    background-size: 30%;
  }
  .welcome{
    flex-direction: column;
    min-width: 0;
    background-color: #0f7dd1;
    word-wrap: break-word;
    background-clip: border-box;
    width: 120px;
    border-width: 0;
    border-radius: 0.4rem;
    /*box-shadow: 0 1px 1px 0 rgb(105, 106, 108);*/
    position: fixed;
    top: 1rem;
    right: 7.6rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 30px;
  }
  .exit{
    flex-direction: column;
    min-width: 0;
    background-color: #0f7dd1;
    word-wrap: break-word;
    background-clip: border-box;
    width: 100px;
    border-width: 0;
    border-radius: 0.4rem;
    /*box-shadow: 0 1px 1px 0 rgb(105, 106, 108);*/
    position: fixed;
    top: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 8px;
    z-index: 200;
    height: 30px;
  }
  .exit span{
    font-size: 12px;
    color: #fff;
  }

  .welcome span{
    font-size: 12px;
    color: #fff;
  }
  .state-window {
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 146px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 5rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 163px;
  }

  .state-window-sub {
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 130px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 5rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 36px;
  }

  .app-home .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 0px;
  }

  .safe-warring .el-tabs__header{
    display: none;
  }
  .device .el-tabs__header{
    display: none;
  }

  .el-menu-item.is-active {
    color: #1C7CD5 !important;
  }

  .el-menu--horizontal>.el-menu-item{
    font-family: "Microsoft YaHei" ! important;
    height: 58px;
    padding: 0 4px;
    margin-right: 20px;
  }
  .el-menu--horizontal>.el-menu-item.is-active {
    text-decoration:none;
    border-bottom:2px solid #1C7CD5; /* #ccc换成链接的颜色 */
    display: inline-block;
    padding-bottom:20px;  /*这里设置你要空的距离*/
  }
  .el-menu.el-menu--horizontal {
    background-color: rgba(233,243,252,0);
    border-bottom: solid 0px #fff;
  }
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    background-color: rgba(233,243,252,0);
  }
  /*修改滚动条样式*/
  ::-webkit-scrollbar{
    width:6px;
    height:6px;
    margin-right: -3px;
    /**/
  }
  ::-webkit-scrollbar-track{
    background: rgb(239, 239, 239);
    border-radius:2px;
  }
  ::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius:10px;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: #1C7CD5;
  }
  ::-webkit-scrollbar-corner{
    background: #179a16;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 30px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 30px;
  }

  .el-table__row td{
    background-color: rgba(233,243,252,1);
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: rgba(246,251,255,1);
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #d3faef;
    color: #118b9c;
  }

  table tr:first-child th:first-child {
    border-top-left-radius: 4px;
  }

  table tr:first-child th:last-child {
    border-top-right-radius: 4px;
  }
  table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
  }

  table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
  }

  .el-input__inner{
    border-radius: 1px
  }
  .el-input--prefix .el-input__inner {
    padding-left: 10px;
  }
  .el-input__prefix{
    left: 145px;
  }
  .el-form-item__content{
    line-height: 20px;
    font-size: 12px;
  }
  .el-form-item__label{
    line-height: 22px;
    font-size: 12px;
  }
  .el-form-item {
    margin-bottom: 2px;
  }
  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0);
    position: fixed;
    bottom: 3px;
    right: 1px;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
  .amap-info-close{
    margin-right: -13px;
  }

  .amap-info-outer, .amap-menu-outer{
    border-radius: 4px;
  }
  .amap-info-outer .info{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    color: #000;
  }

  .amap-info-outer .info-top{
    font-family: "Microsoft YaHei" ! important;
    font-size: 14.5px;
    font-weight: bold;
    height: 24px;
    color: #1c7cd5;
    margin-left: 5px;
  }

  .amap-info-outer .info-middle{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    height: 104px;
    color: #000;
    margin-left: 5px;
    line-height:1.8;
  }
  .amap-info-outer .map-info-close{
    line-height: 2;
    top: 12px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
    background-color: #2aca76 !important;
    color: #eee;
  }
  /*element鼠标滑过高亮显示的颜色也太淡*/
  .el-table__body tr:hover>td {
    background-color: #e2fffa !important;
  }
  .el-table__body tr.current-row>td{
    background-color: #2aca76 !important;
    color: #eee;
  }
</style>
